import { useEffect, useState } from 'react';
import './list.scss'
import PubSub from "pubsub-js";



const List = () => {
    let [list, setList] = useState([
        {
            title: "大数据扫黄，精准定位",
            date: '2023-2-7',
            priority: '1'
        },
        {
            title: "美方拒还飞艇碎片和设备",
            date: '2023-2-6',
            priority: '2'
        }
    ])
    useEffect(() => {
        PubSub.subscribe('list', (name, data) => {
            setList([...list, data])
        })
    })
    const del=(index)=>{
        console.log(index);  
    }
    return (<>
        <div className='list'>
            <h1>列表</h1>
            <table  cellSpacing={0}>
                <thead>
                    <tr>
                        <td>标题</td>
                        <td>日期</td>
                        <td>优先级</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    {
                        list.map((item, index) =>
                            <tr key={index}>
                                <td>{item.title}</td>
                                <td>{item.date}</td>
                                <td><span className='priority'>{item.priority}</span></td>
                                <td style={{color:'red'}}  onClick={()=>del(index)}>删除</td>
                            </tr>)
                    }
                </tbody>
            </table>
        </div>
    </>
    );
}

export default List;